import { WeaEchart } from 'ecCom';
import * as mobx from 'mobx'
export default class WeaChartComp extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            legendData : ["预算数","审批中费用","实际发生数","可用预算数"],
            categories : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            series : [{
                name:'预算数',
                type:'bar',
                data:[1195.00, 2500.00]
            },
            {
                name:'审批中费用',
                type:'bar',
                data:[0.00, 762.00]
            },
            {
                name:'实际发生数',
                type:'bar',
                data:[0.00, 3.00]
            },
            {
                name:'可用预算数',
                type:'bar',
                data:[1195.00, 1735.00]
            }],
            yAxis: {
                //min : 0,
                //max : 2700
                
            },
            tooltip: {
                show : true
               
            },
            grid: {
                //left:40
            },
            color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            option:{
                title: {
                    text: '',
                },
                tooltip: {},
                legend: {
                    selectedMode :true,
                    data:[]
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    
                },
                tooltip: {
                    show : true
                   
                },
                grid: {
                    //left:40
                },
                color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                series: []
            }
        }
    }

    componentDidMount() {
        
    }
    
    componentWillReceiveProps(nextProps) {
        const {optionData,dataMap} = nextProps;
        let option = {};
        if(optionData != undefined){
            option = {
                title: {
                    text: optionData.title,
                },
                tooltip: {},
                legend: {
                    selectedMode :true,
                    data: optionData.legend
                },
                xAxis: {
                    data: optionData.xAxis
                },
                yAxis: {
                    
                },
                tooltip: {
                    show : true
                   
                },
                grid: {
                    //left:40
                },
                color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                series: optionData.seriesList
            }

            this.setState({option:option});

            if(this.refs.chart2 != undefined){
               //this.refs.chart2.paint();
            }
        }
    }

    componentWillUnmount() {
        //组件卸载时一般清理一些状态
        
    }

    //防止多次刷新
    shouldComponentUpdate(nextProps, nextState) {
       // const {optionData,dataMap} = this.props;
       // if(JSON.stringify(nextProps['optionData'])==JSON.stringify(optionData) && 
       //    JSON.stringify(nextProps['dataMap'])==JSON.stringify(dataMap)){
       //      return false;
       // } else {
       //      return true;
       // }

       return true;
    }

    componentDidUpdate() {
        
    }


    render() {
        let {option} = this.state;
        const {optionData,dataMap} = this.props;
        if(optionData != undefined){
            return (
                <div style={{height: 440}}>   
                    <div style={{height: 360}}>
                        <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@y82lx4`} ref="chart2"
                           chartName={option.title}
                           legendData={option.legend}
                           categories={option.xAxis}  
                           series={option.series}                       
                           option={option}
                           chartAction={this.chartAction}
                        />
                    </div>
                </div>
            );
        }else{
            return( <div style={{height: 440}}></div>);
        }
     
    }

    chartAction = (chart) => {
        chart.off("click");
        const {optionData,dataMap} = this.props;
        let {option} = this.state;
        
        chart.on('click', (params) => {
            let name =  params.name;
            let seriesList = dataMap[name];
            if(seriesList != undefined){
                option.title['text'] = seriesList.title;
                option.title['subtext'] = seriesList.subTitle;
                option.legend['data'] = seriesList.legend;
                option.xAxis['data'] = seriesList.xAxis;
                option.series = seriesList.seriesList;
                
            }else{
                option.title['text'] = optionData.title;
                option.title['subtext'] = "";
                option.legend['data'] = optionData.legend;
                option.xAxis['data'] = optionData.xAxis;
                option.series = optionData.seriesList;
                
            }
            this.setState({option:option});
            //this.refs.chart2.clear();
            //this.refs.chart2.paint();
        })   
    }

}